<template>
  <div>
    <!-- 若 token_username 就是账户登录<=0,不存在就显示-->
    <div class="mokuai1" v-if="token_username.length<=0">
      <h3>这是登陆页面</h3>
      <p> 点击mock登录出现500，是因为服务器node没开启</p>
      <p>
        <input type="text" placeholder="用户名" v-model="userlogin" />
      </p>
      <p>
        <input type="text" placeholder="密码" v-model="pswlogin" />
      </p>
      <button @click="loginHandle">登陆</button>
    </div>
    <!--  -->
    <div class="mokuai1" v-else>
      {{token_username}}
      <button @click="logoutHandle"> 退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pswlogin: "", //密码
      userlogin: "", //用户名
      token_username:"",//做上面的判断显示部分
    };
  },
  // 这里做的是判断数据有么有username，有就读取
  created(){
    if (localStorage.getItem("token")) {
      this.token_username=localStorage.getItem("username");
    }
  },
  //
  methods: {
    loginHandle() {
      // 登陆请求
      this.$api
        .getLogin({
          username: this.userlogin,
          password: this.pswlogin,
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code==400) {
            console.log("用户名密码错误")
            alert("用户名密码错误")
          }else{
          console.log(res.data);
          this.token_username=res.data.username;
          // 存储token,以及名字
          localStorage.setItem("token",res.data.token);
          localStorage.setItem("username",res.data.username)
          }
         
        });
    },
    // 退出登录
    logoutHandle(){
      // 正常项目该这样写
      // localStorage.removeItem("username");
      // localStorage.removeItem("token");
      // 为了省事全部清除
      localStorage.clear();
      this.token_username="";
      // this.$router.push("/login")
      this.$router.push("/")

    }
  },
};
</script>

<style>
</style>